<template>
  <div class="wrapper">
    <el-row :gutter="10">
      <el-col :span="3">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>职位列表</span>
            </div>
          </template>
          <el-button type="primary" plain class="addBtn" @click="addPositionFun"
            >+新增职位
          </el-button>
          <div class="keywords-box">
            <el-input placeholder="关键词" v-model="state.keywords">
              <template #append>
                <el-button
                  icon="el-icon-search"
                  @click="searchClick"
                ></el-button>
              </template>
            </el-input>
          </div>
          <div class="position-box">
            <div
              class="positionDiv"
              v-for="(item, index) in state.positionArr"
              :key="index"
            >
              <div
                class="position_item"
                :class="state.currentIndex == index ? 'active' : ''"
                @click="clickPositionFun(item, index)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <el-row type="flex" justify="space-around" class="operation-box">
            <el-col :span="6">
              <el-button type="text" @click="editPositionFun">编辑</el-button>
            </el-col>
            <el-col :span="6">
              <el-button type="text" @click="deletePositionFun">删除</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="20">
        <power
          v-if="state.powerList.length"
          :powerList="state.powerList"
          :powerType="2"
          :operationId="state.operationId"
        ></power>
      </el-col>
    </el-row>
    <!-- 新增职位 -->
    <el-dialog
      :title="state.position_title"
      v-model="state.new_dialogVisible"
      width="500px"
      center
    >
      <span>
        <el-form
          :model="state.form"
          :rules="state.rules"
          ref="form"
          label-width="60px"
          class="demo-ruleForm"
        >
          <el-form-item label="平台类型" prop="platform_type">
            <el-select type="text" v-model="state.form.platform_type">
              <template v-for="item in state.platformTypeArr" :key="item.id">
                <el-option :label="item.name" :value="item.id"></el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="职位名称" prop="position_name">
            <el-input
              type="text"
              v-model="state.form.position_name"
              class="el-input"
            ></el-input>
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.new_dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit_create">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, onMounted, getCurrentInstance, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElNotification } from "element-plus";
import Page from "@/components/Pagination.vue";
import Power from "@/components/Power.vue";
import searchDiv from "@/components/Search.vue";

export default {
  name: "position_manager",
  components: {
    Page,
    searchDiv,
    Power,
  },
  setup() {
    let form = ref(null);
    let multipleTable = ref(null);
    const { ctx } = getCurrentInstance();
    let state = reactive({
      placeholder: "",
      operationId: 0, //当前点击的操作id
      currentIndex: 0, //当前点击的索引
      currentItem: {}, //当前被选中的对象
      keywords: "",
      common_type: "",
      common_id: "",
      chose_ware: [],
      ware_Arr: [],
      new_dialogVisible: false,
      depart_dialogVisible: false,
      powerList: [],

      positionArr: [
        { id: 1, name: "总经理", type: 2 },
        { id: 2, name: "财务主管", type: 3 },
        { id: 3, name: "会计员", type: 1 },
        { id: 4, name: "运营主管", type: 1 },
        { id: 5, name: "运营专员", type: 1 },
        { id: 6, name: "物流主管", type: 3 },
        { id: 7, name: "采购主管", type: 1 },
        { id: 11, name: "总经理", type: 1 },
        { id: 12, name: "财务主管", type: 1 },
        { id: 13, name: "会计员", type: 1 },
        { id: 14, name: "运营主管", type: 1 },
        { id: 15, name: "运营专员", type: 1 },
        { id: 16, name: "物流主管", type: 1 },
        { id: 17, name: "采购主管", type: 1 },
      ],
      platformTypeArr: [
        { id: 1, name: "总部后台" },
        { id: 2, name: "门店后台" },
        { id: 3, name: "代理商后台" },
      ],
      position_title: "",
      form: {
        platform_type: "",
        position_name: "",
      },
      rules: {
        platform_type: [
          { required: true, message: "请选择平台类型", trigger: "change" },
        ],
        position_name: [
          { required: true, message: "请填写职位名称", trigger: "blur" },
        ],
      },
    });
    onMounted(() => {
      getOrderlist();
      state.operationId = state.positionArr[0].id;
      state.currentItem = state.positionArr[0];
      console.log(state.currentItem);
    });

    // 搜索事件
    function searchClick() {
      console.log(state.keywords);
      getOrderlist();
    }

    //获取列表
    function getOrderlist() {
      state.powerList = [
        {
          id: 1,
          name: "库存系统" + state.currentIndex,
          selected: false,
          item: [
            {
              id: 1,
              name: "订单管理",
              selected: false,
              item: [
                { id: 101, name: "创建订单", selected: false },
                { id: 102, name: "订单详情", selected: false },
                { id: 103, name: "删除订单", selected: false },
                { id: 210, name: "创建订单", selected: false },
                { id: 104, name: "订单详情", selected: false },
                { id: 105, name: "删除订单", selected: false },
                { id: 106, name: "创建订单", selected: false },
                { id: 107, name: "订单详情", selected: false },
                { id: 108, name: "删除订单", selected: false },
                { id: 109, name: "创建订单", selected: false },
                { id: 203, name: "订单详情", selected: false },
                { id: 209, name: "删除订单", selected: false },
              ],
            },
          ],
        },
        {
          id: 2,
          name: "门店管理",
          selected: false,
          item: [
            {
              id: 2,
              name: "门店管理1",
              selected: false,
              item: [
                { id: 44, name: "创建门店1", selected: false },
                { id: 55, name: "编辑会员信息1", selected: false },
              ],
            },
            {
              id: 3,
              name: "门店管理2",
              selected: false,
              item: [
                { id: 66, name: "创建门店2", selected: false },
                { id: 77, name: "编辑会员信息2", selected: false },
              ],
            },
            {
              id: 4,
              name: "门店管理3",
              selected: false,
              item: [
                { id: 88, name: "创建门店3", selected: false },
                { id: 99, name: "编辑会员信息3", selected: false },
              ],
            },
          ],
        },
      ];
      console.log(state.powerList);

      return;
      ctx.$http
        .get("/tanxiaji/erp/warehouse/express/list/", {
          index: state.page,
          keywords: state.keyword,
        })
        .then((res) => {
          if (res.errno == 0) {
            state.tableData = res.data;
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }

    //   创建职位
    function addPositionFun() {
      state.position_title = "创建职位";
      state.new_dialogVisible = true;
      state.form = {
        platform_type: "",
        position_name: "",
      };
    }

    // 编辑职位
    function editPositionFun() {
      var item = state.currentItem;
      console.log(item);
      state.position_title = "编辑职位";
      state.new_dialogVisible = true;
      state.form = {
        platform_type: item.type,
        position_name: item.name,
      };
    }

    // 删除职位
    function deletePositionFun() {
      var id = state.currentItem.id;
      console.log(id);
    }

    //新建职位
    function submit_create() {
      var data = state.form;
      form.value.validate((valid) => {
        if (valid) {
          console.log(data);
        }
      });
    }

    //切换职位
    function clickPositionFun(item, index) {
      state.currentItem = item;
      state.currentIndex = index;
      state.operationId = Number(item.id);
      console.log(item, index, state.operationId, state.currentIndex);
      getOrderlist();
    }

    return {
      form,
      searchClick,
      state,
      getOrderlist,
      addPositionFun,
      editPositionFun,
      clickPositionFun,
      submit_create,
      deletePositionFun,
    };
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100%;
  .el-row {
    height: 100%;
    /deep/ .el-card {
      height: 100%;
      .el-card__header {
        padding: 10px;
      }
      .addBtn {
        width: 80%;
        margin: 10px auto;
        display: block;
      }
      .el-card__body {
        padding: 0;
      }
      .keywords-box {
        padding: 0 5px;
        margin: 10px 0;
        /deep/ .el-input {
          width: 100%;
        }
      }
      .position-box {
        max-height: 550px;
        overflow-y: auto;
        .positionDiv {
          border-top: 1px solid gainsboro;
          .position_item {
            width: 100%;
            padding: 14px 0;
            box-sizing: border-box;
            cursor: pointer;
            text-align: center;
            /*border-bottom: 1px solid gainsboro;*/
          }
          .position_item:hover,
          .position_item.active {
            background: #f0f2f5;
          }
        }
      }
      /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
      ::-webkit-scrollbar {
        width: 3px;
        height: 8px;
        background-color: #f3f4f3;
      }
      /*定义滚动条轨道 内阴影+圆角*/
      ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        background-color: #f3f4f3;
      }
      /*定义滑块 内阴影+圆角*/
      ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #cccccc;
      }
      .rowDiv {
        padding: 10px;
        box-sizing: border-box;
      }
      .limitDiv {
        border: 1px solid gainsboro;
        border-radius: 4px;
        margin: 0 10px;
        .limit-item {
          display: flex;
          box-sizing: border-box;
          border-bottom: 1px solid gainsboro;
          .item-left {
            width: 20%;
            display: flex;
            padding: 10px;
            align-items: center;
            border-right: 1px solid gainsboro;
          }
          .item-right {
            width: 80%;
            padding: 10px;
            .child-item {
              display: flex;
              flex-wrap: wrap;
            }
          }
        }
      }
      .operation-box {
        margin-top: 1px;
      }
    }
  }
  .demo-ruleForm {
    /deep/ .el-form-item__label {
      width: 120px !important;
    }
    /deep/.el-input {
      width: 280px;
    }
  }
}
</style>